<template>
  <div class="tz_search">
    <form action="/">
      <van-search
        id="inpuId"
        v-model="value"
        show-action
        placeholder="搜索目的地、锦囊、游记攻略等"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 图片 -->
    <div class="tz_img">
      <img class="img_pic" src="//fes.qyerstatic.com/FsebXHWSYI9xyI5lGPCkocfQ5NVA?imageslim=" alt />
      <van-button class="tz_but" type="primary" size="large">下载全新穷游APP</van-button>
    </div>

    <!-- 24小时热门话题 -->
    <div class="tz_time">
      <h4 class="time_con">24小时热门话题</h4>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    onSearch() {},
    onCancel() {
      this.$router.back();
    }
  },
  mounted() {
    document.getElementById("inpuId").focus();
  }
};
</script>
<style lang="scss" scoped>
.tz_search {
  .van-search__content {
    border-radius: 0.3rem;
  }
  .van-icon-search {
    color: #000000;
  }
  .tz_img {
    width: 6.9rem;
    height: 3.24rem;
    margin-top: 0.28rem;
    .img_pic {
      width: 5.94rem;
      height: 2.34rem;
      margin: 0 0.5rem;
    }
    .tz_but {
      width: 5.58rem;
      height: 0.9rem;
      background: -webkit-linear-gradient(right, #15db91, #06ccc7);
      box-shadow: 0 5px 15px rgba(69, 200, 163, 0.47);
      border-radius: 0.45rem;
      display: block;
      margin: 0 auto;
      color: #fff;
      font-size: 0.28rem;
      line-height: 0.9rem;
      text-align: center;
      font-weight: 700;
      cursor: pointer;
    }
  }
  .tz_time {
    margin: 0.5rem 0.5rem 0;
    .time_con {
      color: rgba(0, 0, 0, 0.4);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      font-size: 0.28rem;
      margin-bottom: 0.25rem;
      position: relative;
    }
  }
}
</style>